import React, { useState } from 'react';
import './InitialLogin.scss';
import Button from '@mui/material/Button';
import Logout from '@mui/icons-material/Logout';
import TextField from '@mui/material/TextField';


const PERMISSION_POINT_FOR_INITIAL_MESSAGE = [
    "- Полностью контролировать добавление и удаление удругих администраторов",
    "- Анализировать показатели сатистики (оценки уроков и показатели датчиков среды)", 
    "- Так же вам дотсупен весь функционал обычного администратора (настройка хабов, добавление новых устройств и т.д.)"
];

const INITIAL_MESSAGE = 
    <div>
        Вы, как глава образовательной организации,
        будете являться главным администратором данного сервиса. 
        Вы будете обладать правами:
        {PERMISSION_POINT_FOR_INITIAL_MESSAGE.map(i => (
            <p>{i}<br /></p>
        ))}
        <br />
        Сейчас вам нужно произвести первичную авторизацию, для этого заполните поля ниже:
    </div>


const isEmail = (email) => {
    return (String(email).includes("@"));
};


function InitialLogin() {
    const [emailValue, setEmailValue] = useState("");
    const [nameValue, setNameValue] = useState("");
    const [schoolNameValue, setSchoolNameValue] = useState("");
    const [passwordValue, setPasswordValue] = useState("");
    const [repeatPasswordValue, setRepeatPasswordValue] = useState("");
    const [stateEmail, setStateEmail] = useState("");
    const [statePassword, setStatePassword] = useState("");
    const [stateRepeatPasswordValue, setStateRepeatPasswordValue] = useState("");

    const tryInit = () => {
        if (passwordValue.length < 8) {
            setStatePassword("err_to_short")
        } else if (!(/\d/.test(passwordValue) && /[a-zA-Zа-яА-Я]/.test(passwordValue))) {
            setStatePassword("err_to_easy")
        } else if (!(repeatPasswordValue === passwordValue)) {
            setStateRepeatPasswordValue("err_not_match")
        } else {
            setStatePassword("ok")
            setStateRepeatPasswordValue("ok")
        }
        if (!isEmail(emailValue)) {
            setStateEmail("err_not_email")
        } else {
            setStateEmail("ok");
        }
    }
    const handleChangeEmail = e => {
        setEmailValue(String(e.target.value).trim());
    };

    const handleChangeName= e => {
        setNameValue(String(e.target.value));
    };

    const handleChangeSchoolName = e => {
        setSchoolNameValue(String(e.target.value));
    };

    const handleChangePassword= e => {
        setPasswordValue(e.target.value);
    };

    const handleChangeRepeatPassword= e => {
        setRepeatPasswordValue(e.target.value);
    };

    var inputEmail;    
    if (stateEmail === "err_not_email") {
        inputEmail = <TextField
            error
            id="outlined-error-helper-text"
            label="Ошибка"
            helperText="введите почту"
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={emailValue} 
            onChange={handleChangeEmail}
        />;
    } else {
        inputEmail = <TextField id="outlined-basic" 
            label="Эл. почта"
            variant="outlined" 
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={emailValue} 
            onChange={handleChangeEmail}
        />;
    }
    var inputPassowrd
    if (statePassword === "err_to_short") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="слишком короткий (< 8)"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else if (statePassword === "err_to_easy") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="слишком простой (используйте цифры и букы)"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else if (statePassword === "err_not_correct") {
        inputPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="неверный пароль"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else {
        inputPassowrd = <TextField
            id="outlined-password-input"
            label="Придумайте пароль"
            type="password"
            autoComplete="current-password"
            value={passwordValue} 
            onChange={handleChangePassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    }

    var inputRepeatPassowrd;
    if (stateRepeatPasswordValue === "err_not_match") {
        inputRepeatPassowrd = <TextField
            error
            id="outlined-password-input"
            label="Ошибка"
            type="password"
            helperText="пароли не совпадют"
            autoComplete="current-password"
            value={repeatPasswordValue} 
            onChange={handleChangeRepeatPassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    } else {
        inputRepeatPassowrd = <TextField
            id="outlined-password-input"
            label="Повторите пароль"
            type="password"
            autoComplete="current-password"
            value={repeatPasswordValue} 
            onChange={handleChangeRepeatPassword}
            style={{marginBottom: "0.5cm", width: "8cm"}}
        />
    }

    return (
        <div className='InittilaLoginSpace'>
            <img src="full_logo.png" alt="log" width="20%"/>
            <div className='InputSpace'>
                <h3>Вас приветствует система умной школы SmartCab!</h3><br />
                <hr style={{width: "9cm", height: "1.3px", borderWidth: "0", color: "black", backgroundColor: "black"}}/>
                <br />
                <p>{INITIAL_MESSAGE}</p>
                <br />
                <hr style={{width: "9cm", height: "1.3px", borderWidth: "0", color: "black", backgroundColor: "black"}}/>
                <br />
                <TextField id="outlined-basic" 
                    label="Имя, отчество"
                    variant="outlined" 
                    style={{marginBottom: "0.5cm", width: "8cm"}}
                    value={nameValue} 
                    onChange={handleChangeName}
                />
                <TextField id="outlined-basic" 
                    label="Название школы"
                    variant="outlined" 
                    style={{marginBottom: "0.5cm", width: "8cm"}}
                    value={schoolNameValue} 
                    onChange={handleChangeSchoolName}
                />
                {inputEmail}
                {inputPassowrd}
                {inputRepeatPassowrd}
                <Button variant="contained"
                    endIcon={<Logout style={{fontSize: '37px'}}/>}  
                    style={{ fontSize: "20px" }}
                    className="LoginButton"
                    onClick={tryInit}>
                    Вперёд
                </Button>
            </div>
            <br />
            <br />
        </div>
    )
}


export default InitialLogin;
